<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>解决IE8不支持placeholder的问题</title>
        <style>
            .my-placeholder{
                color:#f00;
            }
            input, textarea { color: #000; }
            .placeholder { color: #aaa; }
        </style>
    </head>
    <body>
        <div class="container">
            <input id="name" type="text" name="name" placeholder="e.g. John Doe">
            <input type="email" name="email" placeholder="e.g. address@example.ext">
            <input type="url" name="url" placeholder="e.g. https://mathiasbynens.be/">
            <input type="tel" name="tel" placeholder="e.g. +32 472 77 69 88">
            <input type="password" name="password" placeholder="e.g. h4x0rpr00fz">
            <input type="search" name="search" placeholder="Search this site…">
            <textarea name="message" placeholder="Your message goes here"></textarea>

        </div>
        <button id="getVal">获取姓名的值</button><button id="setVal">设置姓名的值</button>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery.placeholder.min.js"></script>
        <script>
            // $('input, textarea').placeholder();
            // 设置placeholder的字体颜色
            $('input, textarea').placeholder({customClass:'my-placeholder'});
            $("#getVal").click(function(){
                alert("123")
                alert($("#name").val())
            });
            $("#setVal").click(function(){
                $("#name").val("");
            })
        </script>
    </body>
</html>